<template>
  <div class="cpDetail">
    <div class="tableBox">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="name" align="center" label="名称" :span="4">
        </el-table-column>
        <el-table-column prop="desc" align="center" label="介绍名称" :span="4">
        </el-table-column>
        <el-table-column prop="tag" align="center" label="标签" :span="4">
        </el-table-column>
        <el-table-column
          prop="type"
          align="center"
          label="优惠劵类型"
          :span="4"
        >
          <template slot-scope="scope">
            <p v-if="scope.row.type == 1">注册赠劵</p>
            <p v-else-if="scope.row.type == 0">通用领券</p>
            <p v-else>兑换码</p>
          </template>
        </el-table-column>
        <el-table-column prop="min" align="center" label="最低消费" :span="4">
          <template slot-scope="scope">
            <p>满{{ scope.row.min }}可用</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="discount"
          align="center"
          label="优惠面值"
          :span="4"
        >
          <template slot-scope="scope">
            <p>减免{{ scope.row.discount }}元</p>
          </template>
        </el-table-column>
      </el-table>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="limit" align="center" label="每人限额" :span="4">
        </el-table-column>
        <el-table-column
          prop="status"
          align="center"
          label="当前状态"
          :span="4"
        >
          <template slot-scope="scope">
            <p v-if="scope.row.status == 0">正常</p>
            <p v-else-if="scope.row.status == 1">已过期</p>
            <p v-else>已下架</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="goodsType"
          align="center"
          label="商品范围"
          :span="4"
        >
          <template slot-scope="scope">
            <p v-if="scope.row.goodsType == 1">指定分类</p>
            <p v-else-if="scope.row.goodsType == 0">全场通用</p>
            <p v-else>指定商品</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="timeType"
          align="center"
          label="有效期"
          :span="4"
        >
          <template slot-scope="scope">
            <p>领取{{ scope.row.timeType }}有效</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="code"
          align="center"
          label="优惠兑换码"
          :span="4"
        >
        </el-table-column>
        <el-table-column prop="total" align="center" label="发行数量" :span="4">
          <template slot-scope="scope">
            <p v-if="scope.row.total == 0">不限</p>
            <p v-else>{{ scope.row.total }}</p>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="main">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input
            v-model="formInline.userId"
            placeholder="请输入用户ID"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="formInline.status"
            placeholder="请选择使用状态"
            clearable
          >
            <el-option label="未使用" value="0"></el-option>
            <el-option label="已使用" value="1"></el-option>
            <el-option label="已过期" value="2"></el-option>
            <el-option label="已下架" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" icon="el-icon-search"
            >查找</el-button
          >
        </el-form-item>
      </el-form>
      <div class="main-foot">
        <el-table :data="tableData2" border style="width: 100%"  :default-sort = "{prop: 'date', order: 'descending'}">
          <el-table-column prop="name" align="center" label="用户优惠券ID" :span="4"  sortable>
          </el-table-column>
          <el-table-column prop="tag" align="center" label="用户ID" :span="4">
          </el-table-column>
          <el-table-column
            prop="type"
            align="center"
            label="领取时间"
            :span="4"
          >
            <template slot-scope="scope">
              <p v-if="scope.row.type == 1">注册赠劵</p>
              <p v-else-if="scope.row.type == 0">通用领券</p>
              <p v-else>兑换码</p>
            </template>
          </el-table-column>
          <el-table-column prop="min" align="center" label="使用状态" :span="4">
            <template slot-scope="scope">
              <p>满{{ scope.row.min }}可用</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="discount"
            align="center"
            label="订单ID"
            :span="4"
          >
            <template slot-scope="scope">
              <p>减免{{ scope.row.discount }}元</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="desc"
            align="center"
            label="使用时间"
            :span="4"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { readCoupon, listCouponUser } from "@/api/coupon.js";
export default {
  data() {
    return {
      tableData: [],
      tableData2: [],
      formInline: {
        userId: null,
        status: null,
      },
      listQuery: {
        page: 1,
        limit: 20,
        sort: "add_time",
        order: "desc",
      },
    };
  },
  methods: {
    getList() {
      readCoupon(this.$route.query.id)
        .then((response) => {
          let arr = [];
          arr[0] = response.data.data;
          this.tableData = arr;
        })
        .catch(() => {});
    },
    onSubmit() {
      this.listQuery.userId = this.formInline.userId;
      this.listQuery.status = this.formInline.status;
      this.listQuery.couponId = this.$route.query.id;
      listCouponUser(this.listQuery)
        .then((response) => {
          this.tableData2 = response.data.data.list;
        })
        .catch(() => {
          this.tableData2 = [];
        });
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
@import "./scss/cpDetail.scss";
</style>